// 导入 Vite 的核心配置函数 defineConfig，用于创建项目配置
import { defineConfig } from 'vite';

// 导入 Vite 的 Vue 3 插件，用于支持 .vue 文件的编译
import vue from '@vitejs/plugin-vue';

// 导入 Node.js 的 path 模块，用于处理文件路径
import path from 'path';

/**
 * 以下两个插件用于自动导入功能（简化开发）
 */
// 导入自动生成 Vue 组件声明的插件
import Components from 'unplugin-vue-components/vite';
// 导入自动生成 API 导入声明的插件（如自动导入 ref, computed 等）
import AutoImport from 'unplugin-auto-import/vite';

// 导入 Element Plus 的解析器，配合自动导入插件使用
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

/**
* 路径解析工具函数
* @param dir 目录名（如 'src'）
* @returns 完整的绝对路径（如 /project/src）
*/
const resolve = (dir: string) => path.join(__dirname, dir);

export default defineConfig({
  // 插件配置
  plugins: [
    // 核心插件：Vue 3 支持
    vue({
      // 可添加 Vue 相关配置，例如自定义模板编译选项等
    }),

    // 自动导入 API 插件（如 ref, computed 等）
    AutoImport({
      resolvers: [ElementPlusResolver()], // Element Plus 的 API 自动导入
      imports: ['vue', 'vue-router', 'pinia'], // 自动导入常用库的 API
      dts: 'src/auto-imports.d.ts', // 自动生成类型声明文件
      eslintrc: { // 生成 eslint 配置（可选）
        enabled: true,
      },
    }),

    // 自动导入组件插件
    Components({
      dirs: ['src/components'], // 自动导入指定目录的组件
      resolvers: [ElementPlusResolver()], // 自动导入 Element Plus 组件
      dts: 'src/components.d.ts', // 自动生成组件类型声明
      deep: true, // 是否递归搜索子目录（默认true）
    }),
    
    /*** 可选的常用插件推荐 ***/
    // 1. vite-plugin-mock 用于本地 mock 数据
    // 2. vite-plugin-inspect 查看插件中间状态
    // 3. vite-plugin-pages 基于文件系统的路由生成
  ],

  /**
   * resolve: 配置Vite的解析别名。在项目中可以使用简短的路径来引用特定的目录。例如，@被映射到src目录，comps被映射到src/components目录，以此类推
   */
  resolve: {
    alias: {
      '@': resolve('src'),       // 源码根目录
      comps: resolve('src/components'), // 组件目录
      api: resolve('src/api'),          // 接口目录
      views: resolve('src/views'),      // 页面组件目录
      utils: resolve('src/utils'),      // 工具函数目录
      routes: resolve('src/routes'),    // 路由配置目录
      styles: resolve('src/styles'),    // 样式目录
      img: resolve('src/assets/img'),   // 图片资源目录
      config: resolve('src/config'),    // 项目配置目录
      store: resolve('src/store'),      // 状态管理目录
    },
    // 扩展名配置（可选）
    extensions: ['.js', '.ts', '.vue', '.json']
  },

  // 开发服务器配置
  server: {
    https: false,         // 是否开启 https
    port: 3000,           // 开发服务器端口
    open: true,           // 启动时自动打开浏览器
    host: '0.0.0.0',      // 允许局域网访问（可选）
    cors: true,           // 默认启用 CORS
    proxy: {              // API 代理配置
      '/api': {
        target: 'http://localhost:5000', // 后端服务地址
        changeOrigin: true,              // 允许跨域
        rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径
        // secure: false // 如果使用https需要配置（可选）
        // ws: true, //websocket支持
      }
    },
    // 热更新配置（可选）
    hmr: {
      overlay: true // 禁用热更新错误提示（默认开启）
    }
  },

  // CSS 预处理器配置
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,          // 支持内联 JavaScript
        additionalData: `@import "@/styles/variables.less";`, // 全局变量注入
        // 可配置更多 Less 选项...
      },
      // 可添加其他预处理器配置（如 scss）
    },
    // 启用 CSS 模块（可选）
    modules: {
      generateScopedName: '[name]__[local]__[hash:base64:5]'
    }
  },

  // 构建配置
  build: {
    outDir: 'dist',                     // 打包输出目录
    assetsDir: 'assets',                // 静态资源目录
    sourcemap: false,                   // 是否生成 sourcemap
    minify: 'terser',                   // 压缩方式（默认terser）
    terserOptions: {                    // 压缩配置（可选）
      compress: {
        drop_console: true,             // 移除 console
        drop_debugger: true             // 移除 debugger
      }
    },
    rollupOptions: {                    // Rollup 打包配置
      output: {
        // 文件命名规则
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
        // 代码分割配置（可选）
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    },
    // 生成压缩报告（可选）
    brotliSize: true,
    chunkSizeWarningLimit: 2000 // 块大小警告阈值（KB）
  },

  // 依赖优化配置
  optimizeDeps: {
    include: ['element-plus'], // 预构建的依赖项
    exclude: [],               // 排除的依赖项
    force: false               // 强制重新预构建（调试用）
  }
})
